<template>
  <div>
    <el-form ref="dataForm" :rules="rules" :model="temp" :label-position="'left'" label-width="120px">
      <template>
        <div v-for="(field, index) in dataForm.fields" :key="index" style="padding: 0 30px;">
          <div v-if="field.show">
            <el-form-item v-if="field.type === 'input'" :label="field.labelShow ? field.label : ''" :prop="field.name">
              <el-input
                v-model.trim="temp[field.name]"
                clearable
                :placeholder="'请输入' + field.label"
              />
            </el-form-item>
            <el-form-item v-if="field.type === 'textarea'" :label="field.labelShow ? field.label : ''" :prop="field.name">
              <el-input
                v-model.trim="temp[field.name]"
                :placeholder="'请输入' + field.label"
                type="textarea"
              />
            </el-form-item>
            <el-form-item v-if="field.type === 'select'" :label="field.labelShow ? field.label : ''" :prop="field.name">
              <el-select v-model="temp[field.name]" :placeholder="field.label">
                <el-option
                  v-for="item in field.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-if="field.type === 'radio'" :label="field.labelShow ? field.label : ''" :prop="field.name">
              <el-radio v-for="item in field.radio" :key="item.value" v-model="temp[field.name]" :label="item.value">{{ item.label }}</el-radio>
            </el-form-item>
            <el-form-item v-if="field.type === 'datetimerange'" :prop="field.name">
              <span>{{ field.label }}：</span>
              <el-date-picker
                v-model="temp[field.name]"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                value-format="yyyy-MM-dd HH:MM:ss"
              />
            </el-form-item>
            <el-form-item v-if="field.type === 'date'" :label="field.labelShow ? field.label : ''" :prop="field.name">
              <el-date-picker
                v-model="temp[field.name]"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
            <!-- <el-form-item v-if="field.type === 'avatar'" :label="field.labelShow ? field.label : ''" :prop="field.name">
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item> -->
          </div>
        </div>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center;">
      <el-button @click="dialogFormVisible = $emit('dialogFormVisibleEmit', false)">
        取消
      </el-button>
      <el-button type="primary" :loading="loading" @click="createData('dataForm')">
        确认
      </el-button>
    </div>
  </div>
</template>

<script>
import { validateUsername, validatePassword, validateMobile,  validateBirthDay} from '@/utils/validator'
import { GetCompanyList, GetDepartmentList } from '@/api/imUser'
export default {
  name: 'DataForm',
  props: {
    dataForm: { type: Object, default: null }
  },
  data() {
    return {
      temp: {
        QQ: '',
        Gender: 1, // 默认
        Mobile: '',
        CRMUserID: 0, // 默认
        WeChat: '',
        CompanyName: '',
        IDCard: '',
        SelfSignature: '',
        DepartmentId: '',
        NickName: '',
        MacAdd: '',
        Location: '',
        UserName: '',
        UserCode: '',
        CompanyId: 0, // 默认
        Avatar: '',
        PassWord: '123456',
        Email: '',
        DepartmentName: '',
        BirthDay: '20230909' // 必填
      },
      rules: {
        // UserName: [{ required: true, trigger: 'blur', validator: validateUsername }],
        // PassWord: [{ required: true, trigger: 'blur', validator: validatePassword }],
        // Mobile: [{ required: true, trigger: 'blur', validator: validateMobile }],
        // BirthDay: [{ required: true, trigger: 'blur', validator: validateBirthDay }]
      },
      companyList: [],
      departmentList: [],
      loading: false,
      a: []
    }
  },
  watch: {
    // 监听对象temp，
    temp: {
      handler(newVal) {
        this.$emit('dataForm', newVal)
      },
      deep: true
    }
  },
  created() {
    this.getCompanyList()
    this.getDepartmentList()
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    //
    getCompanyList() {
      GetCompanyList().then((res) => {
        console.log('88', res)
        if (res.statusCode === 200) {
          this.companyList = res.data
        }
      })
    },
    getDepartmentList() {
      GetDepartmentList().then((res) => {
        console.log('88', res)
        if (res.statusCode === 200) {
          this.departmentList = res.data
        }
      })
    },
    //
    createData(formName) {
      console.log('this.temp', this.temp)
      this.$refs[formName].validate((valid) => {
        console.log(valid)
        if (valid) {
          this.$emit('createDataEmit', this.temp, true)
        }
      })
    }
  }

}
</script>
